<!-- 查看搜索受灾点信息 -->
<template>
  <!--  -->
  <div class="heritage-industry">
    <!-- 地图容器 -->
    <div id="container" class="container">
      <div class="map-buttons">
        <!-- 类型搜索start -->
        <el-select
          class="typeSelect"
          v-model="typeSelect"
          placeholder="请选择类型"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.SiteName"
            :label="item.SiteName"
            :value="item.SiteName"
          >
          </el-option>
        </el-select>
        <el-button
          id="selectBtn"
          class="selectBtn"
          size="mini"
          icon="el-icon-search"
          @click="searchTypeClick"
        ></el-button>

        <el-select
          class="typeSelect"
          v-model="typeSelect2"
          placeholder="请选择类型"
          size="mini"
        >
          <el-option
            v-for="item in options2"
            :key="item.SiteName"
            :label="item.SiteName"
            :value="item.SiteName"
          >
          </el-option>
        </el-select>
        <el-button
          id="selectBtn"
          class="selectBtn"
          size="mini"
          icon="el-icon-search"
          @click="searchTypeClick2"
        ></el-button>

        <el-button
          type="text"
          size="mini"
          @click="addRoadLayer"
          v-show="!roadNetwork"
          class="map-btn map-element"
          >{{ lang === "zh_cn" ? "打开路网" : "Open road" }}</el-button
        >
        <el-button
          type="text"
          size="mini"
          @click="removeRoadLayer"
          v-show="roadNetwork"
          class="map-btn map-element"
          >{{ lang === "zh_cn" ? "关闭路网" : "Close road" }}</el-button
        >

        <el-button
          type="text"
          size="mini"
          @click="addSatellite"
          v-show="isOrdMap"
          class="map-btn map-element"
          >{{ lang === "zh_cn" ? "卫星地图" : "Satellite map" }}</el-button
        >
        <el-button
          type="text"
          size="mini"
          @click="removeSatellite"
          v-show="!isOrdMap"
          class="map-btn map-element"
          >{{ lang === "zh_cn" ? "普通地图" : "General map" }}</el-button
        >

        <el-button
          type="text"
          size="mini"
          @click="resetMap"
          class="map-btn map-element"
          >{{ lang === "zh_cn" ? "复位" : "Reset" }}</el-button
        >
      </div>

      <div class="logoBox">
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/山体滑坡.png"
            alt=""
          />
          <span>山体滑坡</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/泥石流.png"
            alt=""
          />
          <span>泥石流</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/崩塌.png"
            alt=""
          />
          <span>崩塌</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面塌陷.png"
            alt=""
          />
          <span>地面塌陷</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面沉降.png"
            alt=""
          />
          <span>地面沉降</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地裂缝.png"
            alt=""
          />
          <span>地裂缝</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2eccb47b400c8ab58f2dc596dbfe9d53&plugin=AMap.MouseTool,AMap.DistrictSearch"></script>
<script>
import { mapState } from "vuex";
export default {
  name: "HeritageIndustry",

  data() {
    return {
      map: "",
      district: null,
      polygons: [],
      marker: null, //点位

      // 弹框内容
      title: "",
      content: [],
      infoWindow: null,

      dataList: null, // 数据
      isOrdMap: true, //判断是卫星图还是普通图，普通图为true
      satellite: null, //用来存储卫星地图影像
      roadNetwork: false, //是否具有路网，默认没有
      roadNetLayer: null, //用来存储路网

      // 带有输入建议的搜索框
      restaurants: [],
      searchIndustry: "",
      searchObj: null,
      markers: [],

      // 几何
      geometrySearchType: "circle",
      geometryBox: false,
      mouseTool: null,
      overlays: [], //绘制好的覆盖物
      geometrySearchRes: [],
      issearchRes: true, //查询结果图标显示隐藏

      // 类型查询
      options: [
        {
          type: "全部数据",
          SiteName: "全部数据",
        },
        {
          type: "山体滑坡",
          SiteName: "山体滑坡",
        },
        {
          type: "泥石流",
          SiteName: "泥石流",
        },
        {
          type: "崩塌",
          SiteName: "崩塌",
        },
        {
          type: "地面塌陷",
          SiteName: "地面塌陷",
        },
        {
          type: "地面沉降",
          SiteName: "地面沉降",
        },
        {
          type: "地裂缝",
          SiteName: "地裂缝",
        },
      ],
      options2: [
        {
          type: "全部数据",
          SiteName: "全部数据",
        },
      ],
      typeSelect: "全部数据",
      typeSelect2: "全部数据",
    };
  },

  computed: {
    ...mapState(["lang", "ZhaiHaiData"]),
  },
  created() {
    this.dataList = [];
    for (let i = 0; i < this.ZhaiHaiData.length; i++) {
      this.dataList = [...this.dataList, ...this.ZhaiHaiData[i].dataArr];

      var cheArr = this.ZhaiHaiData[i].dataArr;

      for (let m = 0; m < cheArr.length; m++) {
        var index = this.options2.findIndex(
          (ele) => ele.type === cheArr[m].city1
        );
        if (index === -1) {
          this.options2.push({
            type: cheArr[m].city1,
            SiteName: cheArr[m].city1,
          });
        }
      }
    }
    this.restaurant = this.dataList;
    console.log("请求结果", this.dataList, this.options2);
  },

  mounted() {
    this.initMap(); //初始化地图
	//添加受灾点标记
    this.addMarker();
    this.mouseTool = new AMap.MouseTool(this.map);
    // this.addSatellite();
  },

  methods: {
    initMap() {
      //初始化地图
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 5.5, //级别
        zooms: [3, 18],
        center: [105.029928, 32.827431], //中心点坐标
        viewMode: "3D", //使用3D视图
        lang: this.lang,
        mapStyle: "amap://styles/fresh",
        infoWindow: null,
      });
    },

    addMarker() {
      for (let i = 0; i < this.dataList.length; i++) {
        // 循环点坐标
        // 注意这里一定得用 let
        var iconUrl =
          "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/山体滑坡.png";
        if (this.dataList[i].type === "泥石流") {
          iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/泥石流.png";
        }
        if (this.dataList[i].type === "崩塌") {
          iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/崩塌.png";
        }
        if (this.dataList[i].type === "地面塌陷") {
          iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面塌陷.png";
        }
        if (this.dataList[i].type === "地面沉降") {
          iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面沉降.png";
        }
        if (this.dataList[i].type === "地裂缝") {
          iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地裂缝.png";
        }
        let marker = new AMap.Marker({
          // 自定义图标
          icon: new AMap.Icon({
            image: iconUrl,
            size: new AMap.Size(25, 25),
            imageSize: new AMap.Size(25, 25),
          }),
          map: this.map,
          position: [this.dataList[i].jing, this.dataList[i].wei],
          extData: this.dataList[i],
        });

        this.markers.push(marker);

        AMap.event.addListener(marker, "click", () => {
          // this.nowMarker = marker;

          // console.log(this.infoWindow);
          this.title = this.dataList[i].address;

          (this.content = [
            "灾害类型：" + this.dataList[i].type,
            "受灾时间：" + this.dataList[i].time,
            "行政区划：" +
              this.dataList[i].city1 +
              this.dataList[i].city2 +
              this.dataList[i].city3,
            "现场情况：" + this.dataList[i].brief,
          ]),
            (this.infoWindow = new AMap.InfoWindow({
              isCustom: true, //使用自定义窗体
              // content: '  <div style="background-color:white">111</div>',
              content: this.createInfoWindow(
                this.title,
                this.content.join("<br/>")
              ),
              offset: new AMap.Pixel(16, -45),
            }));
          this.infoWindow.open(this.map, marker.getPosition());
        });
      }
    },

    //渲染弹框
    createInfoWindow(title, content) {
      // console.log("11111111");
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "white";
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      var bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = "relative";
      bottom.style.top = "0px";
      bottom.style.margin = "0 auto";
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },

    // 关闭弹框
    closeInfoWindow() {
      this.map.clearInfoWindow();
      this.searchIndustry = null;
    },

    // 打开卫星地图
    addSatellite() {
      // console.log(111);
      this.isOrdMap = !this.isOrdMap;
      this.satellite = new AMap.TileLayer.Satellite();
      this.map.add(this.satellite);
    },

    // 关闭卫星地图
    removeSatellite() {
      this.isOrdMap = !this.isOrdMap;
      this.map.remove(this.satellite);
    },

    // 打开路网
    addRoadLayer() {
      this.roadNetwork = !this.roadNetwork;
      this.roadNetLayer = new AMap.TileLayer.RoadNet();
      this.map.add(this.roadNetLayer);
    },

    // 关闭路网
    removeRoadLayer() {
      this.roadNetwork = !this.roadNetwork;
      this.map.remove(this.roadNetLayer);
    },
    // 输入建议start
    handleSelect(item) {
      console.log(item);
      this.searchObj = item;
      console.log(this.searchIndustry);
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurants) => {
        return (
          restaurants.name.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    // 复位事件
    resetMap() {
      location.reload();
      // this.map.setCenter([115.464523, 38.874476]);
    },

    // 类型查询start
    async getAllType() {
      for (let i = 0; i < this.dataList.length; i++) {
        if (
          !this.options.some((ele) => ele.type === this.dataList[i].SiteName)
        ) {
          this.options.push(this.dataList[i]);
        }
      }
      console.log("下拉菜单", this.options);
    },

    searchTypeClick() {
      this.typeSelect2 = "全部数据";
      console.log(this.typeSelect);
      this.map.remove(this.markers);
      this.map.clearInfoWindow();
      this.markers = [];
      if (this.typeSelect === "全部数据") {
        this.addMarker();
      } else {
        var filEnd = this.dataList.filter(
          (ele) => ele.type === this.typeSelect
        );
        console.log(filEnd);
        for (let i = 0; i < filEnd.length; i++) {
          var iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/山体滑坡.png";
          if (filEnd[i].type === "泥石流") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/泥石流.png";
          }
          if (filEnd[i].type === "崩塌") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/崩塌.png";
          }
          if (filEnd[i].type === "地面塌陷") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面塌陷.png";
          }
          if (filEnd[i].type === "地面沉降") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面沉降.png";
          }
          if (filEnd[i].type === "地裂缝") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地裂缝.png";
          }
          // 循环点坐标
          // 注意这里一定得用 let
          let marker = new AMap.Marker({
            // 自定义图标
            icon: new AMap.Icon({
              image: iconUrl,
              size: new AMap.Size(25, 25),
              imageSize: new AMap.Size(25, 25),
            }),
            map: this.map,
            position: [filEnd[i].jing, filEnd[i].wei],
            extData: filEnd[i],
          });

          // this.map.setCenter(filEnd[i].coordinate); //设置地图中心点为当前位置

          this.markers.push(marker);

          AMap.event.addListener(marker, "click", () => {
            // this.nowMarker = marker;

            // console.log(this.infoWindow);
            this.title = filEnd[i].address;

            (this.content = [
              "灾害类型：" + filEnd[i].type,
              "受灾时间：" + filEnd[i].time,
              "行政区划：" +
                filEnd[i].city1 +
                filEnd[i].city2 +
                filEnd[i].city3,
              "现场情况：" + filEnd[i].brief,
            ]),
              (this.infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                content: this.createInfoWindow(
                  this.title,
                  this.content.join("<br/>")
                ),
                offset: new AMap.Pixel(16, -45),
              }));
            this.infoWindow.open(this.map, marker.getPosition());
          });
        }
      }

      this.map.setFitView();
    },

    searchTypeClick2() {
      this.typeSelect = "全部数据";
      console.log(this.typeSelect);
      this.map.remove(this.markers);
      this.map.clearInfoWindow();
      this.markers = [];
      if (this.typeSelect2 === "全部数据") {
        this.addMarker();
      } else {
        var filEnd = this.dataList.filter(
          (ele) => ele.city1 === this.typeSelect2
        );
        console.log(filEnd);
        for (let i = 0; i < filEnd.length; i++) {
          var iconUrl =
            "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/山体滑坡.png";
          if (filEnd[i].type === "泥石流") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/泥石流.png";
          }
          if (filEnd[i].type === "崩塌") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/崩塌.png";
          }
          if (filEnd[i].type === "地面塌陷") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面塌陷.png";
          }
          if (filEnd[i].type === "地面沉降") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地面沉降.png";
          }
          if (filEnd[i].type === "地裂缝") {
            iconUrl =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/地裂缝.png";
          }
          let marker = new AMap.Marker({
            // 自定义图标
            icon: new AMap.Icon({
              image: iconUrl,
              size: new AMap.Size(25, 25),
              imageSize: new AMap.Size(25, 25),
            }),
            map: this.map,
            position: [filEnd[i].jing, filEnd[i].wei],
            extData: filEnd[i],
          });
          this.markers.push(marker);

          AMap.event.addListener(marker, "click", () => {
            // this.nowMarker = marker;

            // console.log(this.infoWindow);
            this.title = filEnd[i].address;

            (this.content = [
              "灾害类型：" + filEnd[i].type,
              "受灾时间：" + filEnd[i].time,
              "行政区划：" +
                filEnd[i].city1 +
                filEnd[i].city2 +
                filEnd[i].city3,
              "现场情况：" + filEnd[i].brief,
            ]),
              (this.infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                content: this.createInfoWindow(
                  this.title,
                  this.content.join("<br/>")
                ),
                offset: new AMap.Pixel(16, -45),
              }));
            this.infoWindow.open(this.map, marker.getPosition());
          });
        }
      }

      this.map.setFitView();
    },
  },
};
</script>

<style>
.heritage-industry #container {
  border-bottom: 1px solid #f9d5a7;
}

.logoBox {
  position: fixed;
  top: 275px;
  right: 15px;
  z-index: 99;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.logoBox div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.logoBox img {
  width: 40px;
  margin-right: 10px;
}

/* .logoBox span {
  display: inline-block;
  margin-top: -50px;
} */
/* 弹框样式 */
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
  width: 280px;
  background-color: white;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-middle img {
  width: 100px;
  height: 70px;
  padding-bottom: 10px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}

.xiangxi {
  color: #555;
}

/* 地图元件样式 */

.heritage-industry .map-buttons {
  padding: 15px;
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
}

.heritage-industry .geometrySearch {
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 999;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  margin-right: 15px;
  border: 1px solid #dcdfe6;
}

.heritage-industry .geometrySearch .geometryType {
  display: block;
  padding-bottom: 15px;
  color: #606266;
}

.heritage-industry .geometrySearch .geometryBtns {
  padding-top: 15px;
}

.heritage-industry .map-buttons .closegeometryBox {
  margin-left: 0;
}

.heritage-industry .geometrySearch .searchRes {
  padding-top: 15px;
}

.heritage-industry .geometrySearch .searchRes .el-form-item__label {
  font-size: 12px;
  color: #111;
}

.heritage-industry .geometrySearch .searchRes .el-form-item {
  margin: 0;
  padding-left: 10px;
}

.heritage-industry .map-buttons .el-input__inner {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: none;
}

.heritage-industry .map-buttons .selectBtn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-right: 10px;
}
</style>